<template>
  <u-modal :show="show" :showConfirmButton="false">
    <view @touchmove.stop.prevent="touchmove">
      <view class="wx-popup-title">客戶個人信息隱私聲明</view>
      <scroll-view :scroll-top="scrollTop" scroll-y="true" class="wx-popup-con">
        <!-- 标题 -->
        <view class="statement">錦龍汽車集團有限公司，私隱政策聲明(「聲明」)</view>
        <!-- ------------------------ 解析富文本**开始 ------------------------ -->
        <mp-html :content="privacyPolicyZh" />
      </scroll-view>
      <view class="wx-popup-btn">
        <text class="btn-no" @click="closeRul">确定</text>
      </view>
    </view>
  </u-modal>
</template>

<script>
import { formatRichText } from '@/utils/utils'
import { groupIntroductionApi } from '@/API/carSeries'
export default {
  name: 'RulesCompanyHK',
  props: {},
  data() {
    return {
      show: false,
      privacyPolicyZh: null
    }
  },
  methods: {
    openRul() {
      if (this.privacyPolicyZh === null) { //第一次没有内容，则要请求回来
        this.groupIntroductionFn()
      } else {
        this.show = true
      }
    },
    closeRul() {
      this.show = false
    },
    touchmove() {
      return
    },
    // ------------------------ 香港规则-开始 ------------------------
    async groupIntroductionFn() {
      const { data: { code, result }
      } = await groupIntroductionApi()
      // console.log('data1 :>> ', result[0]);
      if (code == 200) {
        if (result?.[0]?.privacy_policy_zh) {
          // 处理富文本
          this.privacyPolicyZh = formatRichText(result[0].privacy_policy_zh)
        }
        // console.log('  this.privacyPolicyZh :>> ', this.privacyPolicyZh);
        this.show = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
// 滚动条样式
::v-deep ::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 3px !important;
  height: 1px !important;
  overflow: auto !important;
  background: #ccc !important;
  -webkit-appearance: auto !important;
  display: block;
}

::v-deep ::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 10px !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1) !important;
  background: #7b7979 !important;
}

::v-deep ::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  // box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
  // border-radius: 10px !important;
  background: #ffffff !important;
}

.wx-popup-title {
  padding-bottom: 20rpx;
  text-align: center;
  font-size: 30rpx;
  border-bottom: 1rpx solid #eee;
  font-weight: bold;
}

.wx-popup-con {
  padding-bottom: 10rpx;
  height: 63vh;
}

.statement {
  padding: 20rpx 0;
  font-size: 28rpx;
  font-weight: 600;
  color: #222;
}

// ------------------------ 底*确定按钮**开始 ------------------------
.wx-popup-btn {
  display: flex;
  justify-content: space-around;
  padding-top: 20rpx;
  // padding: 20rpx 0;
  border-top: 2rpx solid #ccc;

  .btn-no {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56%;
    height: 77rpx;
    border: 2rpx solid #262626;
    border-radius: 88rpx;
    color: #fff;
    background: #262626;
  }
}
</style>
